<template>
	<div class="mypoint-container">
		<div
				class="my-point"
				:style="`background-image:url(${pointBg});background-repeat:no-repeat;background-size:100% 100%;background-position:center;`"
		>
			<div class="point">
				<p class="point-num fontGilroy">{{point}}</p>
			</div>
			<div class="getpros shadow-box">
				<a href="javascript:;" class="change-item" @click="clickSendPoint">
					<i class="icon_red_packet"></i>
					<span class="item-title">转赠他人</span>
				</a>
				<a href="javascript:;" class="change-item" @click="clickZhuanPoint">
					<i class="icon_goods"></i>
					<span class="item-title">转为普通积分</span>
				</a>
			</div>
		</div>
		<van-dialog
				v-model="showSendDialog"
				:title="'赠送'+point_name"
				show-cancel-button
				confirm-button-text="确定"
				class="common-confirm"
				:before-close="zengSongClick"
		>
			<div class="donation-box">
				<div class="con-box">
					<div class="input-box clearfix">
						<label for="">会员ID：</label><input type="number" name="friend_uid" id="J-get-info" v-model="sendPointForm.friend_uid"/>
						<span class="info"></span>
					</div>
					<div class="input-box clearfix">
						<label for="">数量：</label><input type="number" name="point" v-model="sendPointForm.point"/>
					</div>
					<p class="tips">扣除手续费后预计到账{{accountNum}}个</p>
				</div>
			</div>
		</van-dialog>

		<div class="point-log shadow-box">
			<h2><i></i><span>{{point_name}}明细</span></h2>
			<div v-if="pointLog.length>0">
				<template v-if="!hzwDz">
					<van-list
							v-model="loading"
							:finished="finished"
							:error.sync="error"
							error-text="请求失败，点击重新加载"
							finished-text=""
							@load="onLoad"
					>
						<div class="point-log-item" v-for="(row,index) in pointLog" :key="index">
							<h3>{{row.title}}</h3>
							<p class="brokerage" v-if="row.type != 2">手续费：{{row.exchange_fee}}</p>
							<p class="time">{{row.create_time}}</p>
							<span class="num" v-if="row.is_add==1">+{{row.change_num}}</span>
							<span class="num" v-else>-{{row.change_num}}</span>
						</div>
					</van-list>
				</template>
				<!-- 杭州湾 定制 去除 分页 start -->
				<template v-else>
					<div class="point-log-item" v-for="(row,index) in pointLog" :key="index">
						<h3>{{row.title}}</h3>
						<p class="time">{{row.create_time}}</p>
						<span class="num" v-if="row.is_add==1">+{{row.change_num}}</span>
						<span class="num" v-else>-{{row.change_num}}</span>
					</div>
				</template>
				<!-- 杭州湾 定制 去除 分页 end -->
			</div>
			<div v-else>
				<no-data :noData=noData></no-data>
			</div>
		</div>
		<!--  转为普通积分弹窗  -->
		<van-dialog
				v-model="showZhuanDialog"
				show-cancel-button
				confirm-button-text="确定"
				class="common-confirm"
				:before-close="zhuanPutongClick"
		>
			<div class="donation-box">
				<div class="con-box">
					<div class="input-box clearfix zhuan-box">
						<input type="number" name="point" placeholder="请输入转换的积分数量" v-model="zhuanPointForm.point"/>
					</div>
					<p class="tips tips-zhuan">预计到账：{{accountPTNum}}个普通积分</p>
				</div>
			</div>
		</van-dialog>
	</div>
</template>

<script>
	import noData from '@/components/noData/index'
	import Storage from '@/utils/store.js'
	import Vue from 'vue'
	import { Dialog } from 'vant'
	import { getCashPointLog } from '@/api/dz/dzXianjinjifen'
	import { dzCashPointConvert, dzTransferCashPoint } from '@/api/dz/dzXianjinjifen'
	// 全局注册
	Vue.use(Dialog)
	import 'vant/lib/dialog/style'
	export default {
		name: 'index',
		components: {
			noData
		},
		data() {
			return {
				sid: 0,
				isShowAlert: true,
				showSendDialog: false,
				noData: {
					img: 'https://img.wifenxiao.com/h5-wfx/images/no_collection_goods.png',
					text: '暂无数据'
				},
				point_name: '积分',
				point: '',
				is_point_red: '', // 积分兑换红包
				is_exchange_point: '', // 积分兑换商品
				is_point_rank: '', // 积分排行
				is_point_send: '', // 赠送积分
				pointBg: 'https://img.wifenxiao.com/h5-wfx/images/user/point_bg.png',
				pointLog: [],
				loading: false,
				finished: false,
				error: false,
				p: 2,
				sendPointForm: {
					friend_uid: '',
					point: ''
				},
				pointOrderUrl: '',
				hzwDz: false,
				// 积分过期冻结
				draw_alert: '',
				will_expire_point: '',
				point_will_time: '',
				freeze_point: '',
				freeze_time: '',
				scale: 2,
				isScale: false,
				num: 5,
				showZhuanDialog: false,
				zhuanPointForm: {
					point: ''
				},
				dzCashPoint: {
					dz_cash_point: 0,
					dz_cash_point_transfer_fee: 0,
					dz_cash_point_transfer_fee_percent: 0,
					dz_cash_to_std_percent: 0
				}
			}
		},
		computed: {
			accountNum: function() {
				if (Number(this.dzCashPoint.dz_cash_point_transfer_fee_percent)) {
					return Number(this.sendPointForm.point) - Math.ceil((Number(this.sendPointForm.point) * (this.dzCashPoint.dz_cash_point_transfer_fee_percent / 100)))
				} else {
					if (this.sendPointForm.point) {
						if (Number(this.sendPointForm.point) <= Number(this.dzCashPoint.dz_cash_point_transfer_fee)) {
							return 0
						} else {
							return Number(this.sendPointForm.point) - Number(this.dzCashPoint.dz_cash_point_transfer_fee)
						}
					} else {
						return 0
					}
				}
			},
			accountPTNum: function() {
				if (this.zhuanPointForm.point) {
					return Number(this.zhuanPointForm.point) - Math.ceil((Number(this.zhuanPointForm.point) * (Number(this.dzCashPoint.dz_cash_to_std_percent) / 100)))
				} else {
					return 0
				}
			}
		},
		methods: {
			Jump(url, data) {
				this.$JumpPath(this, url, data)
			},
			init() {
				this.$loadingWrap.show()
				setTimeout(() => {
					this.$loadingWrap.close()
				}, 10000)
				getCashPointLog().then(res => {
					this.$loadingWrap.close()
					if (res.status == 1) {
						const resData = res.data
						this.dzCashPoint.dz_cash_point = resData.dz_cash_point
						this.dzCashPoint.dz_cash_point_transfer_fee = resData.dz_cash_point_transfer_fee
						this.dzCashPoint.dz_cash_point_transfer_fee_percent = resData.dz_cash_point_transfer_fee_percent
						this.dzCashPoint.dz_cash_to_std_percent = resData.dz_cash_to_std_percent
						// 页面title
						// document.title = this.dzCashPoint.cash_point_alais
						wx.setNavigationBarTitle({
							title: this.dzCashPoint.cash_point_alais  //修改title
						})
						// console.log(this.dzCashPoint)
						this.point_name = this.dzCashPoint.cash_point_alais || '积分'
						this.point = resData.cash_points
						this.pointLog = resData.list
					} else {
						this.$Error(res.msg)
					}
				})
			},
			// 关闭提示
			closeAlert() {
				this.isShowAlert = false
			},
			// 点击转赠积分
			clickSendPoint() {
				this.sendPointForm.friend_uid = ''
				this.sendPointForm.point = ''
				this.showSendDialog = true
			},
			// 点击转为普通积分
			clickZhuanPoint() {
				this.showZhuanDialog = true
			},
			zengSongClick(action, done) {
				// console.log(action)
				if (action == 'confirm') {
					if (!this.sendPointForm.friend_uid) {
						this.$Error('会员ID不能为空')
						done(false)
						return false
					}
					if (!this.sendPointForm.point) {
						this.$Error('转赠积分不能为空')
						done(false)
						return false
					}
					this.$loadingWrap.show()
					dzTransferCashPoint(this.sendPointForm).then(res => {
						this.$loadingWrap.close()
						this.init()
						if (res.status == 1) {
							done()
							this.$Error('赠送成功')
							this.clickCloseDialog()
						} else {
							done(false)
							this.$Error(res.msg)
						}
					})
				} else {
					done()
					this.sendPointForm.friend_uid = ''
					this.sendPointForm.point = ''
					this.showSendDialog = false
				}
			},
			zhuanPutongClick(action, done) {
				if (action == 'confirm') {
					if (!this.zhuanPointForm.point) {
						this.$Error('积分不能为空')
						done(false)
						return false
					}
					this.$loadingWrap.show()
					setTimeout(() => {
						this.$loadingWrap.close()
					}, 10000)
					dzCashPointConvert({ type: 3, point: this.zhuanPointForm.point }).then(res => {
						this.init()
						this.$loadingWrap.close()
						if (res.status == 1) {
							done()
							this.$Error('转换成功')
							this.closeDialog()
						} else {
							done(false)
							this.$Error(res.msg)
						}
					})
				} else {
					this.zhuanPointForm.point = ''
					done()
				}
			},
			// 关闭转赠积分弹窗执行
			closeDialog() {
				this.sendPointForm.friend_uid = ''
				this.sendPointForm.point = ''
				this.zhuanPointForm.point = ''
			},
			onLoad() {
				this.loading = true
				const data = {
					p: this.p
				}
				getCashPointLog(data)
						.then(res => {
							this.loading = false
							if (res.data.length) {
								this.pointLog.push(...res.data)
								this.p++
							} else {
								this.finished = true
							}
						})
						.catch(() => {
							this.error = true
						})
			}
		},
		created() {
			// 现金积分 定制
			if (Storage.fetchLocal('cashPoint')) {
				this.dzCashPoint = Storage.fetchLocal('cashPoint')
				// console.log(this.dzCashPoint)
			}
			/* 杭州湾 去除分页 */
			this.sid = Storage.fetchLocal('sid')
			const hzwDz = this.$_shop('$_ZJHL_DZ', this.sid)
			this.hzwDz = hzwDz
			this.init()
		}
	}
</script>

<style lang="scss">
	@import '../../../styles/mixin';
	.mypoint-container{
		.tool-info {
			width: 750px;
			line-height: 80px;
			box-sizing: border-box;
			padding: 0 60px 0 30px;
			position: relative;
			display: flex;
			font-size: 26px;
			color: #f38847;
			background: rgba(255, 242, 216, 1);
			p {
				white-space: nowrap;
			}
			span {
				display: block;
				position: absolute;
				right: 0;
				width: 80px;
				height: 80px;
				text-align: center;
			}
		}
		.shadow-box{
			box-shadow:0 2px 18px rgba(82,82,82,.06);
		}
		.my-point{
			// height: 419px;
			padding:72px 0 0;

			.point{
				text-align:center;
				padding-bottom: 64px;
			}
			.point-name{
				margin-top:4px;
				font-size:26px;
				color:#FFD9DD;
			}
			.point-num{
				font-size:50px;
				line-height:1.2;
				font-weight: bold;
				color:#fff;
				margin-bottom: 24px;
			}
			.point_overdue_freeze{
				display: flex;
				justify-content: space-around;
				align-items: center;
				font-size: 30px;
				color: #fff;
				>div>p{
					line-height: 1;
					margin-bottom: 18px;
					&:last-child{
						font-weight: bold;
						margin-bottom: 0;
					}
				}
			}
		}
		.getpros{
			margin:0 25px ;
			border-radius:7px;
			background:#fff;
			display:flex;
			justify-content: space-around;
			border-radius: 20px;
			.change-item{
				padding:30px 0;
				i{
					display:block;
					width:46px;
					height:46px;
					margin:0 auto;
					background-position:center center;
					background-repeat:no-repeat;
					background-size:auto 100%;
					&.icon_red_packet{
						background-image:url(https://img.wifenxiao.com/h5-wfx/images/user/point/point_red_packet.png);
					}
					&.icon_goods{
						background-image:url(https://img.wifenxiao.com/h5-wfx/images/user/point/point_goods.png);
					}
					&.icon_order{
						background-image:url(https://img.wifenxiao.com/h5-wfx/images/user/point/point_order.png);
					}
					&.icon_rank{
						background-image:url(https://img.wifenxiao.com/h5-wfx/images/user/point/point_rank.png);
					}
					&.icon_send{
						background-image:url(https://img.wifenxiao.com/h5-wfx/images/user/point/point_send.png);
					}
				}
				.item-title{
					display:block;
					margin-top:22px;
					font-size: 22px;
				}
			}
		}
		.point-log{
			margin:20px 25px;
			padding:25px 30px;
			border-radius:7px;
			background:#fff;
			border-radius: 25px;
			h2{
				i{
					display:inline-block;
					width:5px;
					height:28px;
					margin-right:8px;
					vertical-align:-2px;
					background: #F3152B;
				}
				padding:10px 0;
				font-size:32px;
				font-weight:700;
			}
			.point-log-item{
				position:relative;
				padding:34px 120px 34px 0;
				border-bottom:1px solid #EDEDED;
				h3{
					font-size:28px;
					line-height:1.2;
				}
				.time{
					margin-top:16px;
					font-size:24px;
					color:#999;
				}
				.num{
					position:absolute;
					right:4px;
					top:50%;
					transform: translateY(-50%);
					font-size:32px;
					color:#FD2049;
					font-weight: bold;
				}
			}
		}
		.donation-box{
			.con-box{
				position:relative;
				padding:40px 60px;
			}
			.input-box{
				margin:16px 0;
				font-size:28px;
				label{
					float:left;
					display:block;
					width:150px;
					line-height:76px;
					text-align:right;
					font-weight:normal;
					color: #666666;
				}
				input{
					float:left;
					-webkit-appearance: none;
					width:256px;
					height:76px;
					padding:16px 10px;
					border:2px solid #EDEDED;
					border-radius:6px;
				}
			}
		}
	}
	.zhuan-box{
		input{
			width:100% !important;
		}
	}
	.integral {
		display: inline-block;
		height: 56px;
		margin-left:6px;
		padding: 0 30px;
		font-size: 26px;
		color: #333;
		border-color:#999;
		background: #fff;
		color: #F20B22;
	}
	.tips{
		ont-weight: normal;
		color: #666666;
		font-size: 24px;
		text-indent: 70px;
	}
	.tips-zhuan{
		text-indent: 0 !important;
		margin-top: 50px;
	}
	.brokerage{
		margin-top:16px;
		font-size:24px;
		color:#999;
	}

</style>
